import { defineComponent, onMounted, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import './StartUp.scss';

interface Path {
    path: string
    title: string
}
export default defineComponent({
    name: 'StartUp',
    props: {
        data: {

        }
    },
    setup(props) {
        const router = useRouter();
        const arr:Path[] = [
            { path: 'js', title: '补充js知识以及常用工具' },
            { path: 'webpack', title: 'webpack' },
            { path: 'vite', title: 'vite' },
            { path: 'es2022', title: 'es2022' },
            { path: 'css', title: '前沿的css新知识' },
            { path: 'webApi', title: 'webApi' },
            { path: 'theory', title: '与面试官吹牛的武功秘籍' },
            { path: 'git', title: 'git指令大全' },
            { path: 'designMode', title: '设计模式' }
        ];
        function onToPath(path:string) {
            router.push({ path });
        }

        return () => {
            return (
                <>
                    {arr.map(item => <div class='cell' onClick={() => onToPath(item.path)}>{item.title}</div>)}
                </>
            )
        }
    }
})
